<template>
  <el-container class="back-image">
  <el-header>
    <el-row 
    class="header"
    type = "flex"
    justify = "space-between"
    >
        <el-col>
            <span>欢迎你</span>
        </el-col>
        <el-col class="cheng">
            <span>11111</span>
        </el-col>
        <el-col class="align">
            <el-button type="warning">账户设置</el-button>
            <el-button>退出登录</el-button>
        </el-col>
    </el-row>
  </el-header>
  <el-container>
    <el-aside width="200px" class="aside-style">
      <!-- <menupage></menupage> -->
    </el-aside>
    <el-main style="height:100vh; background-color:#DEDEDE;">
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
// import menupage from './../components/menuPage.vue';
export default {
  components: {menupage },

}
</script>

<style>
/* .back-image{
  background: url(./../../public/img/background.jpg);
} */
    .el-header{
        background-color: #000;
    }
    .header{
        height: 60px;
        line-height: 60px;
        color: #fff;
    }
    .el-button{
        width: 110px;
        height: 50px;
    }
    .align{
        text-align: right;
    }

    .cheng{
        text-align:center;
    }
   .aside-style{
  height: calc(100vh-60px);
  background-color: #000;
}
</style>

<script>
export default {
    data() {
      return {
        isCollapse: true
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
  </script>